<template>
  <div>
    <van-nav-bar title="我的订单" left-text="返回" left-arrow>
      <template #right>
        <van-icon name="search" size="18"/>
      </template>
    </van-nav-bar>
    <van-tabs v-model:active="active">
      <van-tab title="全部">
        <van-row>
          <div class="order">
            <div class="title">
              <div class="left">小米商城</div>
              <div class="right">已收货</div>
            </div>
            <van-divider/>
          </div>

          <van-row v-for="(o,index) in orderArr" :key="index" style="margin: 0 20px 0 20px">
            <van-col :span="16" style="background-color: #ff6700">{{ o.title }}</van-col>
            <van-col :span="8" style="text-align: right;">
              <p>{{ o.price }}</p>
              <p>x{{ o.count }}</p>
            </van-col>
          </van-row>


          <van-divider/>
        </van-row>
      </van-tab>
      <van-tab title="待付款">
        阿凡达士大夫

      </van-tab>
      <van-tab title="待收货">
        发生发射点
      </van-tab>

    </van-tabs>
  </div>
</template>

<script>
export default {
  name: "list",
  data() {
    return {
      orderArr: [
        {
          title: '小米wifi放大器',
          price: 99,
          count: 1,
        },
        {
          title: '小米11手机',
          price: 2299,
          count: 1,
        }]
    }
  }
}
</script>

<style scoped>
.order {
  margin: 20px 0 0 0;
}

.order .title {
  margin: 0 20px 0 20px;
  font-size: 16px;
  overflow: hidden;
}

.order .title .left {
  float: left;
}

.order .title .right {
  float: right;
  color: #ff6700;
}
</style>